<template>
    <div class="data-info">
        <div ref="container"></div>
    </div>

</template>

<script>
    import Chart from "@/components/g2/chart";

    export default {
        mounted() {
            const data = [
                { year: '1991', value: 3 },
                { year: '1992', value: 4 },
                { year: '1993', value: 3.5 },
                { year: '1994', value: 5 },
                { year: '1995', value: 4.9 },
                { year: '1996', value: 6 },
                { year: '1997', value: 7 },
                { year: '1998', value: 9 },
                { year: '1999', value: 13 },
            ]
            // Step 1: 创建 Chart 对象
            const chart = new Chart({
                container: this.$refs['container'], // 指定图表容器 ID
                autoFit: true,
                height: 300,
            });
            // Step 2: 载入数据源
            chart.data(data);
            chart.theme('antv');
            // Step 3: 创建图形语法，绘制柱状图
            chart.line().position('year*value');
            chart.render();
        }
    }
</script>
